<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/includefile.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${basePath}/css/fileinput.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="${basePath}/plugins/iCheck/all.css" rel="stylesheet" type="text/css" />
<script src="${basePath}/js/fileinput.js" type="text/javascript"></script>
<script src="${basePath}/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<style>
body{
font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑",tahoma,arial,simhei,"黑体";
}
</style>
<script>
$(document).ready(function(){
	$("#uploadPics").on('fileloaded', function(event, file, previewId, index) {
        //alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.type);
        var input = document.getElementById("uploadPics");
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.readAsDataURL(file);
			var file = input.files[0];
			reader.onload = function(e) {
                var img = new Image();
                img.src = this.result;

                img.onload = function() {
                	$('#picWH').val(this.width+'*'+this.height);
                	$('#picSize').val((file.size / 1024).toFixed(2)+'KB');
                	}
                }
		}
    });
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    });
    if('${check}'!=''&&'${check}'==0){
     $('#saveTip :first-child').text('失败提醒！');
     $('#saveTip').removeClass('callout-success').addClass('callout-danger');
     $('#saveTip').slideDown(1000);
     setTimeout("$('#saveTip').slideUp(2000);",5000)
    }else if('${check}'!=''&&'${check}'==1){
     $('#saveTip :first-child').text('成功提醒！');
     $('#saveTip').removeClass('callout-danger').addClass('callout-success');
     $('#saveTip').slideDown(1000);
     setTimeout("$('#saveTip').slideUp(2000);",5000)
    }else{
     $('#saveTip').parent().parent().remove();
    }
    

});
</script>
<title>单文件上传</title>
</head>
<body class="skin-blue">

<div class="wrapper">

 <header class="main-header">
 <s:action name="main!navbar" executeResult="true"></s:action>
 </header>
 <aside class="main-sidebar">
   <s:action name="main!menu" executeResult="true"></s:action>
 </aside>


<div class="content-wrapper">
<!-- 页面标题 start -->
 <section class="content-header">
   <h1>图片上传<small>单图片上传</small></h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li><a href="#">图片上传</a></li>
      <li class="active">单图片上传</li>
   </ol>
 </section>
 <!-- 页面标题 end -->
 <!-- 页面内容 start -->
 <section class="content">
   <div class='row'>
     <div class='col-md-12'>
       <div class="box box-primary">
         <div class="box-header">
            <i class="fa fa-edit"></i>
            <h3 class="box-title">添加数据</h3>
         </div>
         <div class="box-body pad table-responsive">
           <form class="form-horizontal" role="form" action="tool!savePicInfos.html" method="post" enctype="multipart/form-data">
             <table class="table table-bordered text-center">
                <tr>
                  <td>
                    <div class="col-sm-12">
                      <div class="callout callout-success" id="saveTip" style="display:none;">
                        <h4>成功提醒！</h4>
                        <p>${tipInfo}</p>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="picName" class="col-sm-2 control-label">图片名称：</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="picName" name="picInfo.picName"/>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="createUser" class="col-sm-2 control-label">上传人：</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="createUser" value="${currentUser.username}" disabled/>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="picType" class="col-sm-2 control-label">所属分类：</label>
                    <div class="col-sm-4">
                    <select class="chosen-select chosen-transparent form-control" id="picType" name="picInfo.picGroupid">
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                     <option>4</option>
                    </select>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="isShow" class="col-sm-2 control-label">
                                                              是否展示&nbsp;&nbsp;<input type="checkbox" class="flat-red" checked/>
                    </label>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="picWH" class="col-sm-2 control-label">图片宽高比：</label>
                    <div class="col-sm-2">
                     <input type="text" class="form-control" id="picWH" disabled/>
                    </div>
                    <label for="picSize" class="col-sm-2 control-label">图片大小：</label>
                    <div class="col-sm-2">
                     <input type="text" class="form-control" id="picSize" disabled/>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="picRemark" class="col-sm-2 control-label">图片描述：</label>
                      <div class="col-sm-4">
                       <textarea class="form-control" name="picInfo.picRemark" id="picRemark" rows="6"></textarea>
                      </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label for="picName" class="col-sm-2 control-label">图片上传：</label>
                    <div class="col-sm-10">
                     <input id="uploadPics" name="uploadPics" class="file" type="file" data-show-upload="false"/>                 
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="col-sm-offset-3 col-sm-2"><button type="submit" class="btn btn-block btn-info btn-flat">保存</button></div>
                    <div class="col-sm-2"><button type="reset" class="btn btn-block btn-success btn-flat">重置</button></div>
                  </td>
                </tr>
             </table>
           </form>
         </div>
       </div>
     </div>
   </div>
 </section>
 <!-- 页面内容 end -->
 </div>
 </div>
</body>
</html>
		